<template>
  <div class="card form-card">
    <h2>{{ $t('profile.title') }}</h2>
    
    <!-- 个人信息编辑区域 -->
    <div class="profile-section">
      <h3 style="color: var(--color-dark-blue); margin-bottom: 16px; font-size: 20px;">基本信息</h3>
      <form @submit.prevent="onSave">
        <div class="form-row">
          <label>{{ $t('profile.name') }}</label>
          <input v-model="user.name" />
        </div>
        <div class="form-row">
          <label>身份证号</label>
          <input 
            v-model="user.idNumber" 
            :class="{ error: idNumberError }"
            @input="validateIdNumber"
            placeholder="请输入18位身份证号"
          />
          <span v-if="idNumberError" class="error-icon">⚠️</span>
        </div>
        <div class="form-row">
          <label>{{ $t('profile.mobile') }}</label>
          <input 
            v-model="user.mobile" 
            :class="{ error: mobileError }"
            @input="validateMobile"
            placeholder="请输入11位手机号"
          />
          <span v-if="mobileError" class="error-icon">⚠️</span>
        </div>
        <div class="form-row">
          <label>{{ $t('profile.email') }}</label>
          <input v-model="user.email" />
        </div>
        <div class="form-row">
          <label>{{ $t('profile.preferredLanguage') }}</label>
          <select v-model="preferredLanguage">
            <option value="zh">中文</option>
            <option value="ug">ئۇيغۇرچە</option>
            <option value="bo">བོད་ཡིག</option>
          </select>
        </div>
        <div class="actions-center">
          <button class="btn-primary" type="submit">{{ $t('profile.save') }}</button>
        </div>
      </form>
    </div>

    <!-- 修改密码区域 -->
    <div class="profile-section" style="margin-top: 24px;">
      <h3 style="color: var(--color-dark-blue); margin-bottom: 16px; font-size: 20px;">{{ $t('profile.changePassword') }}</h3>
      <form @submit.prevent="onChangePassword">
        <div class="form-row">
          <label>当前密码</label>
          <input type="password" v-model="passwordForm.oldPassword" required />
        </div>
        <div class="form-row">
          <label>新密码</label>
          <input type="password" v-model="passwordForm.newPassword" required />
        </div>
        <div class="form-row">
          <label>确认新密码</label>
          <input type="password" v-model="passwordForm.confirmPassword" required />
        </div>
        <div class="actions-center">
          <button class="btn-primary" type="submit">修改密码</button>
        </div>
      </form>
    </div>

    <!-- 操作提示 -->
    <div style="margin-top: 20px; padding: 12px; background: #f0f8ff; border-radius: 8px; color: #666;">
      <p style="margin: 0; font-size: 14px;">💡 提示：当前为演示模式，数据仅保存在本地，刷新页面后会重置</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProfileView',
  data() {
    return {
      user: { 
        name: '张三', 
        idNumber: '110101199001011234',
        mobile: '13800138000', 
        email: 'zhangsan@example.com' 
      },
      preferredLanguage: this.$i18n.locale,
      passwordForm: { 
        oldPassword: '', 
        newPassword: '', 
        confirmPassword: '' 
      },
      idNumberError: false,
      mobileError: false
    }
  },
  created() {
    this.loadUserData()
  },
  watch: {
    preferredLanguage(newLocale) {
      this.$i18n.locale = newLocale
      this.saveUserData()
    }
  },
  methods: {
    loadUserData() {
      // 从localStorage加载用户数据，如果没有则使用默认值
      const savedUser = localStorage.getItem('userProfile')
      if (savedUser) {
        this.user = { ...this.user, ...JSON.parse(savedUser) }
      }
      
      const savedLang = localStorage.getItem('preferredLanguage')
      if (savedLang) {
        this.preferredLanguage = savedLang
        this.$i18n.locale = savedLang
      }
    },
    saveUserData() {
      // 保存用户数据到localStorage
      localStorage.setItem('userProfile', JSON.stringify(this.user))
      localStorage.setItem('preferredLanguage', this.preferredLanguage)
    },
    onSave() {
      // 模拟保存操作
      this.saveUserData()
      alert('个人信息保存成功！')
    },
    validateIdNumber() {
      const idRegex = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
      this.idNumberError = this.user.idNumber && !idRegex.test(this.user.idNumber)
    },
    validateMobile() {
      const mobileRegex = /^1[3-9]\d{9}$/
      this.mobileError = this.user.mobile && !mobileRegex.test(this.user.mobile)
    },
    onChangePassword() {
      // 验证密码
      if (this.passwordForm.newPassword !== this.passwordForm.confirmPassword) {
        alert('两次输入的新密码不一致！')
        return
      }
      
      if (this.passwordForm.newPassword.length < 6) {
        alert('新密码长度至少6位！')
        return
      }
      
      // 模拟密码修改
      alert('密码修改成功！')
      this.passwordForm = { oldPassword: '', newPassword: '', confirmPassword: '' }
    }
  }
}
</script>

<style scoped>
</style> 